<template>
  <div>
    <el-form
      :model="formData"
      inline
      style="display: flex; justify-content: flex-end; margin-top: 10px"
    >
      <el-form-item prop="key">
        <el-input v-model="formData.key" placeholder="请输入对象key"></el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入对象名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="addDiaog('创建', 'add', null)" type="primary"
          >添加</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :v-Loading="facLoading" :data="tableData" border>
      <el-table-column
        align="center"
        label="对象KEY"
        prop="key"
      ></el-table-column>
      <el-table-column
        align="center"
        label="对象名称"
        prop="name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="对象类型"
        prop="type"
      ></el-table-column>
      <el-table-column align="center" label="对象大小" prop="size">
      </el-table-column>
      <el-table-column align="center" label="图片" prop="url">
      </el-table-column>
      <el-table-column align="center" label="图片链接" prop="url">
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="deleteFa(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500">
        <el-upload
            class="avatar-uploader"
            action="http://192.168.200.251:8888/admin/storage/create"
            :show-file-list="false"
            :on-success="iconUrlSuccess"
            :headers="{ 'shopping-admin-token': token }"
          >
        <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
    </el-dialog>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  name: "objectStockpile",
  componentTitle: "对象储存",
  data() {
    return {
      token: sessionStorage.getItem("shopping-admin-token"),
      dialogTitle:'上传对象',
      facLoading: false,
      dialogVisible: false,
      tableData: [],
      formData: {
        key: "",
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      dialogFormData: {
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    //调用数据
    search() {
      (this.facLoading = true),
        axios({
          url: 'http://192.168.200.251:8888/admin/storage/list',
          method: "get",
          params: {
            page: this.pageInfo.page,
            limit: this.pageInfo.limit,
            ...this.formData,
          },
          headers: {
            "shopping-admin-token": sessionStorage.getItem(
              "shopping-admin-token"
            ),
          },
        }).then((res) => {
          this.facLoading = false, 
          this.tableData = res.data.data.list;
          this.pageInfo.total = res.data.data.total;
        });
    },
    //打开dialog窗口
    addDiaog(title, type, row) {
      console.log(row);
      this.dialogVisible = true;
      this.dialogType = type;
      this.dialogTitle = title;

  
    },
    handleSizeChange(value) {
      this.pageInfo.limit = value;
      this.search();
    },
    handleCurrentChange(value) {
      this.pageInfo.page = value;
      this.search();
    },
   
    //上传图片成功的回调函数
    iconUrlSuccess(res, file) {
      this.dialogFormData.picUrl = res.data.url.replace(
        /localhost:8888/g,
        "192.168.200.251:8888"
      );
    },
    picUrlSuccess(res, file) {
      this.dialogFormData.iconUrl = res.data.url.replace(
        /localhost:8888/g,
        "192.168.200.251:8888"
      );
    },
    //添加接口
    addData() {
      axios({
        url: 'http://192.168.200.251:8888/admin/storage/create',
        method: "post",
        data: {
          file:''
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
       console.log(res)
      });
    },
    deleteFa(row) {
      this.$confirm("此操作将删除该问题, 是否继续?").then(() => {
        axios({
          url:  'http://192.168.200.251:8888/admin/storage/delete',
          method: "post",
          data: row,
          headers: {
            "shopping-admin-token": sessionStorage.getItem(
              "shopping-admin-token"
            ),
          },
        }).then((res) => {
          this.$notify.success({ title: "删除成功" });
          this.search();
        });
      });
    },
  },
};
</script>

